---
title: Fresh + Hanko
sidebar_label: Fresh
keywords: [fresh]
sidebar_custom_props:
  docCardIconName: fresh
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

# Fresh

In this guide you will learn how to use the
[hanko-elements](https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md) web components
with your Fresh application.

## Add `<hanko-auth>` component

To provide a login interface in your app, use the `<hanko-auth>` web component. Due to an
[issue](https://github.com/teamhanko/hanko/issues/641) in Fresh, we're using a browser script to load the web elements.
Call it with the URL of the Hanko API as an argument to register the `<hanko-auth>` element with
the browser's [`CustomElementRegistry`](https://developer.mozilla.org/de/docs/Web/API/CustomElementRegistry).

:::info

If you are using [Hanko Cloud](https://cloud.hanko.io), you can find the API URL on your project dashboard.
If you are self-hosting you need to provide the URL of your running Hanko backend.

:::

```js title="Login.tsx" showLineNumbers
const endpoint = "HANKO_API_URL";

const code = `
  import { register } from 'https://esm.sh/@teamhanko/hanko-elements@0.5.5-beta';

  register('${endpoint}', { shadow: true });
  document.addEventListener('hankoAuthSuccess', (event) => {
    document.location.href = '/protected';
  });
`;

export default function Login() {
  return (
    <div class="auth-container">
      <hanko-auth api={endpoint}></hanko-auth>
      <script type="module">
        {code}
      </script>
    </div>
  );
}
```

## Add `<hanko-events>` component

The `<hanko-events>` component provides a convenient way to subscribe to specific
[events](https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md#events) without displaying any UI elements.
The other hanko-elements will also dispatch these events.

Unfortunately, in the current state of Fresh, there is no added benefit on using because, you cannot leverage the framework event system
to handle the dispatched events.

## Add `<hanko-profile>` component {#hanko-profile}

To provide a page where users can manage their email addresses, password and passkeys, use the `<hanko-profile>` web
component. Just as with the `<hanko-auth>` component, import the hanko elements via a native script.

```js title="HankoProfile.tsx" showLineNumbers
const endpoint = "HANKO_API_URL";

const code = `
  import { register } from 'https://esm.sh/@teamhanko/hanko-elements@0.5.5-beta';

  register('${endpoint}', { shadow: true });
`;

export default function Profile() {
  return (
    <div class="profile">
      <hanko-profile api={endpoint}></hanko-profile>
      <script type="module">
        {code}
      </script>
    </div>
  );
}
```

## Implement logout

Use the Hanko client to logout. The code below use a custom event to trigger the logout:

```js title="HankoProfile.tsx" showLineNumbers
const endpoint = "HANKO_API_URL";
const code = `
  import { register, Hanko } from 'https://esm.sh/@teamhanko/hanko-elements@0.5.5-beta';

  register('${endpoint}', { shadow: true });
  window.addEventListener('logout', () => {
    const hanko = new Hanko('${endpoint}');
    hanko.user.logout()
      .then(() => {
        window.location.href = '/signin';
      })
      .catch((error) => {
        // error handling
      });
  });
`;


export default function Profile() {
  const logout = () => {
    window.dispatchEvent(new Event("logout"));
  };

  return (
    <div class="profile">
      <button class="logout-btn" onClick={logout}>Logout</button>
      <hanko-profile api={endpoint}></hanko-profile>
      <script type="module">
        {code}
      </script>
    </div>
  );
}
```


## Customize component styles

The styles of the `hanko-auth` and `hanko-profile` can be customized using CSS variables and parts. See our guide
on customization [here](https://github.com/teamhanko/hanko/tree/main/frontend/elements#ui-customization).

## Authenticate backend requests

If you want to authenticate requests in your own backend, please view our [backend guide](/guides/backend).
